<template>
	<div class="security navBar">
		<van-nav-bar :title="$route.meta.title" left-arrow @click-left="$routerBack" />
		<div class="security_item">
			<span>绑定手机号</span>
			<div>
				<p v-if="user_info">{{user_info.mobile.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')}}</p>
				<p v-if="!user_info">正在加载...</p>
				
				<!-- <img src="../../assets/user/go.png" alt=""> -->
			</div>
		</div>
		<div class="security_item" @click="$router.push({ name: 'changePassword', params: { type: 0 , phone: user_info.mobile }})">
			<span>修改登录密码</span>
			<img src="../../assets/user/go.png" alt="">
		</div>
		<div class="security_item" @click="$router.push({ name: 'changePassword', params: { type: 1 , phone: user_info.mobile }})">
			<span>修改交易密码</span>
			<img src="../../assets/user/go.png" alt="">
		</div>
	</div>
</template>

<script>
	export default{
		name:"security",
		async created() {

			if (!this.$store.state.user_info) {

				try {

					const data = await this.$apis.User.xinxi()

					this.user_info = data.data

					this.$store.state.user_info = data.data


				} catch (e) {
					//TODO handle the exception
				}

			} else {

				this.user_info = this.$store.state.user_info
				
			}
		},
		data(){
			return{
				user_info:""
			}
		}
	}
</script>

<style lang="less" scoped>
	@import '../../style/navBar.less';
	
	.security{
		
		.security_item {
			padding: .3rem .4rem;
			box-sizing: border-box;
			color: #94E9FF;
			font-size: .28rem;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 1px solid #1A304F;
			
			div{
				display: flex;
				align-items: center;
				
				img{
					margin-left: .31rem;
				}
			}
		}
		
	}
</style>
